
<ion-view>
    <style>
        .button.button-icon.input-button {
            position: absolute;
            right: 0;
            top: 5px;
            color: #bbb;
        }
        .item img {
            height: 60px;
            width: 60px;
            float: left;
            margin-top: 20px;
            margin-right: 10px;
        }
        .list .my-item.item {
            left: 0;
            right: 0;
            padding-top: 0;
            padding-bottom: 0;
        }
    </style>
<ion-header-bar class="bar-positive">
    <h1 class="title">3000 Contacts</h1>
    <div class="button" ng-click="scrollBottom()">
        Scroll To Bottom
    </div>
</ion-header-bar>
<ion-header-bar class="bar-light bar-subheader">
    <input type="search"
           placeholder="Filter contacts..."
           ng-model="search"
           ng-focus="searchFocused = true"
           ng-blur="searchFocused = false"
           ng-change="scrollTop()">
    <button ng-if="search.length"
            class="button button-icon ion-android-close input-button"
            ng-click="clearSearch()">
    </button>
</ion-header-bar>
<ion-content>
    <div class="list">
        <a class="item my-item"
           collection-repeat="item in getContacts()"
           collection-item-height="getItemHeight(item)"
           collection-item-width="getItemWidth(item)"

           ng-style="{'line-height': getItemHeight(item) + 'px'}"
           ng-class="{'item-divider': item.isLetter}">

            {{item.letter || (item.first_name+' '+item.last_name)}}
        </a>
    </div>
</ion-content>
</ion-view>
